<template>
    <div class="receiptDetailwrap">
        <div class="waybillInfo">
            <div class="titleH3">
                <i></i>
                <h3>运单信息</h3>
            </div>
            <ul>
                <li><b>运单号</b>：<span>{{waybillInfo.transBillId}}</span></li>
                <li><b>运单日期</b>：<span>{{waybillInfo.transBillDate}}</span></li>
                <li><b>运单状态</b>：<span>{{waybillInfo.transBillStatus | transBillStatus}}</span></li>
                <li><b>运输方式</b>：<span>{{waybillInfo.transTypeName}}</span></li>
                <li><b>运输总量</b>：<i>{{(waybillInfo.transWeight*1).toFixed(3)}}</i><span>吨</span></li>
                <li><b>运费包含</b>：<span>{{waybillInfo.feeName}}</span></li>
                <li><b>预计杂费</b>：<i>{{(waybillInfo.otherAmount*1).toFixed(2)}}</i><span>元（税率：{{waybillInfo.feeTaxRate*100}}%）</span></li>
                <li><b>运输要求</b>：<span>{{waybillInfo.transRequest}}</span></li>
            </ul>
        </div>
         <div class="lineInfo">
            <div class="lineSing" v-for='(item,index) in transportD'>
                <div class="titleH3">
                    <i></i>
                    <h3>线路{{index+1}}</h3>
                </div>
                <ul>
                    <li><i>起点</i>：<span>{{item.beginSiteProvince}}</span></li>
                    <li><i>终点</i>：<span>{{item.endSiteProvince}}</span></li>
                    <li><i>提货点</i>：<span>{{item.beginSiteStorage}}（{{item.beginSiteAddr}}）</span></li>
                    <li><i>联系人</i>：<span>{{item.beginSiteContract}}  {{item.beginSitePhone}}</span></li>
                    <li><i>提货时间</i>：<span>{{item.pickupTime}}</span></li>
                    <li><i>卸货点</i>：<span>{{item.endSiteStorage}}  {{item.endSiteAddr}}</span></li>
                    <li><i>联系人</i>：<span>{{item.endSiteContract}}   {{item.endSitePhone}}</span></li>
                    <li><i>卸货时间</i>：<span>{{item.deliveryTime}}</span></li>
                    <li><i>货物信息</i>：<span>{{item.productTypeNameByApp}} {{((item.totalGoodsWeightByApp || 0)*1).toFixed(3)}}吨 {{item.totalGoodsCountByApp}}件</span><a class="fr" href="javascript:;" @click='showGoods(item.transportGoodsVo)'>查看详情</a></li>
                </ul>
                
            </div>
        </div>
        <div class="receiptInfo">
            <h3>回单信息</h3>
            <ul>
                <li>
                    <span>回单吨位</span>
                    <input type="text" placeholder="0.000" v-model="actDispatchWeight">
                </li>
                <li>
                    <span>回单件数</span>
                    <input type="text" placeholder="0" v-model="actDispatchCount">
                </li>
                <li>
                    <span>实时杂费</span>
                    <input type="text" placeholder="0.00" v-model="otherFee">
                </li>
            </ul>
        </div>
        <div class="upload">
             <h3>装卸货上传</h3>
            <ul class="imgGroup clearfix">
                <li class="add"  @click='getUploadPictures(30)'>+</li>
                <li v-for="(item, index) in stevedores">
                    <img class="wc-preview-img" :src="item.attachmentUrl" @click="appShowImg($event, imgStevedores,index)">
                    <div class="dele" @click='removeData(stevedores,item,index,1)'>×</div>
                </li>
            </ul>
            <h3>签收单上传</h3>
            <ul class="imgGroup clearfix">
                <li class="add" @click='getUploadPictures(10)'>+</li>
                <li  v-for="(item, index) in attachment" >
                    <img  class="wc-preview-img" :src="item.attachmentUrl" alt="" @click="appShowImg($event, imgAttachment,index)">
                    <div class="dele" @click='removeData(attachment,item,index,2)'>×</div>
                </li>
            </ul>
            <h3>杂费发票上传</h3>
            <ul class="imgGroup clearfix">
                <li class="add" @click='getUploadPictures(20)'>+</li>
                <li v-for="(item, index) in attachmentInvoice">
                    <img class="wc-preview-img" :src="item.attachmentUrl" @click="appShowImg($event, imgInvoice,index)" >
                    <div class="dele" @click='removeData(attachmentInvoice,item,index,3)'>×</div>
                </li>
            </ul>
            <div class="footBtnGroup">
                 <router-link to="/transport">
                    <a href="javascript:;" class="back" >返回</a>
                 </router-link>
                <a href="javascript:;" class="sureUp"  @click='saveReceipt'>确认上传</a>
            </div>
        </div>
        <mt-popup v-model="popupVisible" popup-transition="popup-fade">
            <mt-PopupTable :transportGoodsVo="transportGoodsVo"></mt-PopupTable>
        </mt-popup>
    </div>
</template>
<script type="text/ecmascript-6">
import ApiService from '@/services/API-servies'
import { Tabbar, TabItem ,Cell,TabContainer,TabContainerItem,Button,Popup,DatetimePicker,MessageBox} from 'mint-ui';
import MTabbar from '../foot/Tabbarfoot'
import PopupTable from '../public/popupTable'
  export default {
    data() {
      return {
        waybillInfo : {
            transBillId:'',
            transBillDate:'',
            transBillStatus:'',
            transTypeName:'',
            transWeight:'',
            otherAmount:'',
            transRequest:'',
            feeName:'',
            transAmount:'',
            transPrice:'',
            quoteType:'',
            feeTaxRate:0.11
        },
        offerForm: {
            transBillId:'',
            quotationPrice:'',
            pickupTime:'',
            deliveryTime:'',
        },
        transportD:[],
        transportGoodsVo:[],
        popupVisible:false,
        popupVisible2:false,
        dispatchId:'',
        actDispatchWeight:'',
        actDispatchCount:'',
        otherFee:'',
        attachment:[],
        attachmentInvoice:[],
        stevedores:[],
        type:'',
        removeId:[],
        res:'',
        imgStevedores:[],
        imgInvoice:[],
        imgAttachment:[],
      }
    },
    created: function (){
        // this.setSession();
        this.getDetail();
        this.getDispatchCarrier();
        window.getUploadPictures = this.getUploadPictures;
        window.setUploadPictures = this.setUploadPictures;
        this.getUpload();
    },
    mounted(){
        setTimeout(() => {
            if(this.$isBrower.isAndroid){
            }else if(this.$isBrower.isIos){
                this.setIosTitleType();
            }
        }, 0)
    },
    methods: {
        getUploadPictures(type){
            this.type = type;
            if(this.$isBrower.isAndroid){
                app.getUploadPictures(this.dispatchId,6);
            }else if(this.$isBrower.isIos){
                this.toUpload();
            }
        },
        setUploadPictures(res){
            for (var i = res.length - 1; i >= 0; i--) {
                var _attachment = {
                    attachmentId:'',
                    attachmentUrl:''
                }
                _attachment.attachmentUrl=res[i];
                if(this.type == 30){
                    this.stevedores.push(_attachment);
                    this.imgStevedores.push(_attachment.attachmentUrl);
                }
                if(this.type == 20){
                    this.attachmentInvoice.push(_attachment);
                    this.imgInvoice.push(_attachment.attachmentUrl);
                }
                if(this.type == 10){
                    this.attachment.push(_attachment);
                    this.imgAttachment.push(_attachment.attachmentUrl);
                }
            }
        },
        toUpload(){
            let params = this.dispatchId+"-"+6;
            this.$bridge.callhandler('ToUpload', params, (data) => {
              // 处理返回数据
             // this.callhandler = data
            })
        },
        getUpload(){
            this.$bridge.registerhandler('GetUpload', (data) => {
                this.res = data;
                for (var i = data.length - 1; i >= 0; i--) {
                    let _attachment = {
                        attachmentId:'',
                        attachmentUrl:''
                    }
                    _attachment.attachmentUrl=data[i];
                    if(this.type == 30){
                        this.stevedores.push(_attachment);
                        this.imgStevedores.push(_attachment.attachmentUrl);
                    }else if(this.type == 20){
                        this.attachmentInvoice.push(_attachment);
                        this.imgInvoice.push(_attachment.attachmentUrl);
                    }else if(this.type == 10){
                        this.attachment.push(_attachment);
                        this.imgAttachment.push(_attachment.attachmentUrl);
                    }
                }
            })
        }
        ,
        getDetail(){
            let transBillId = this.$route.query.transBillId;
            this.offerForm.transBillId = transBillId;
            ApiService.driver.detail({
                transBillId:transBillId
            }).then((res) =>{
                if(res.meta.retCode === '0'){
                    this.assign(res.data);
                }
            });
        },
        assign(data){
            for(let item in this.waybillInfo){
                this.waybillInfo[item] = data[item];
            };
            this.transportD = data.transportD;
            this.transBillStatus = data.transBillStatus
        },
        showGoods(transportGoodsVo){
            this.popupVisible=true;
            this.transportGoodsVo=transportGoodsVo
        },getDispatchCarrier(){
             let transBillId = this.$route.query.transBillId;
            ApiService.receipt.dispatchCarrier({
                    transBillId:transBillId
            }).then((res) =>{
                if(res.meta.retCode != '0'){
                    return ;
                }
                var _dispach = res.data;
                this.dispatchId = _dispach.dispatchId;
                if(_dispach.actDispatchWeight > 0){
                    this.actDispatchWeight = (_dispach.actDispatchWeight*1).toFixed(3);
                }else{
                    if(_dispach.dispatchWeight > 0){
                        this.actDispatchWeight = (_dispach.dispatchWeight*1).toFixed(3);
                    }
                }
                if(_dispach.actDispatchCount > 0){
                    this.actDispatchCount = _dispach.actDispatchCount;
                }
                if(_dispach.otherFee > 0){
                    this.otherFee = (_dispach.otherFee*1).toFixed(2);
                }

                this.attachment = _dispach.attachment;
                this.attachmentInvoice = _dispach.attachmentInvoice;
                this.stevedores = _dispach.stevedores;

                this.imgStevedores = [];
                this.imgInvoice = [];
                this.imgAttachment = [];

                for (var i = this.attachment.length - 1; i >= 0; i--) {
                    this.imgAttachment.push(this.attachment[i].attachmentUrl);
                }
                for (var i = this.attachmentInvoice.length - 1; i >= 0; i--) {
                    this.imgInvoice.push(this.attachmentInvoice[i].attachmentUrl);
                }
                for (var i = this.stevedores.length - 1; i >= 0; i--) {
                    this.imgStevedores.push(this.stevedores[i].attachmentUrl);
                }
            })
        },
        removeData(_array,_item,_index,val){
            if('' != _item.attachmentId){
                this.removeId.push(_item.attachmentId);
            }
            _array.splice(_index,1);
            if(val == 1){
                let _imgStevedores = this.imgStevedores;
                var index = _imgStevedores.indexOf(_item.attachmentUrl);
                if (index > -1) {
                    _imgStevedores.splice(index, 1);
                }
            }else if(val == 2){
                let _imgAttachment = this.imgAttachment;
                var index = _imgAttachment.indexOf(_item.attachmentUrl);
                if (index > -1) {
                    _imgAttachment.splice(index, 1);
                }
            }else{
                let _imgInvoice = this.imgInvoice;
                var index = _imgInvoice.indexOf(_item.attachmentUrl);
                if (index > -1) {
                    _imgInvoice.splice(index, 1);
                }
            }
        },
        saveReceipt(){
                /*var img = ["http://101.132.40.254/home/ftp/temp/DB17111538365/cb4ad4fc-e089-4536-8c1a-eabce18f760e.png","http://101.132.40.254/home/ftp/temp/DB17111538365/9b5ccf79-93b5-4642-8c90-15e4358cf0f3.png"];
                for (var i = img.length - 1; i >= 0; i--) {
                    var _attachment = {
                        attachmentId:'',
                        attachmentUrl:''
                    }
                    _attachment.attachmentUrl=img[i];
                    this.stevedores.push(_attachment);
                }*/

                ApiService.receipt.appUpload({
                    dispatchId:this.dispatchId,
                    dispatchWeight:this.actDispatchWeight == '' ? 0 : this.actDispatchWeight,
                    dispatchCount:this.actDispatchCount == '' ? 0 : this.actDispatchCount ,
                    otherFee:this.otherFee  == '' ? 0 : this.otherFee,
                    attachment:JSON.stringify(this.attachment),
                    attachmentInvoice:JSON.stringify(this.attachmentInvoice),
                    stevedores:JSON.stringify(this.stevedores),
                    removeId:JSON.stringify(this.removeId),
                }).then((res) =>{
                    if(res.meta.retCode != '0'){
                        MessageBox('提示', '操作失败');
                        return ;
                    }
                    MessageBox('提示', '上传成功').then(action => {
                      if (action == 'confirm') {
                        this.$router.push({path: '/transport'})
                      }
                    });
                })
            },
            appShowImg($event,list,index){
                let params = {
                    currentIndex:index,
                    pickerList:list 
                  };
                if(this.$isBrower.isIos){
                  this.$bridge.callhandler('LookBigPictureAction', params, (data) => {})
                }
                if(this.$isBrower.isAndroid){
                  app.showImg(params);
                }
            }
          ,
            //ios 设置头部信息
          setIosTitleType(){
            let params = {
              isReturn: true,
              isSearch: false,
              isTitleSegment:false
            };
            this.$bridge.callhandler('needBarButton', params, (data) => {})
          }
    },
    watch: {
        /*transBillStatus:function(val, oldVal){
            if(val == 40){
                this.disabled = false;
            }
        },*/
    },
    filters: {
        city(val){
            var index=val.indexOf('-') + 1;
            return val.substring(index)
        },
        transBillStatus(val){
            if(val == 30){
                return '待竞价'
            }else if(val == 50){
                return '待选择'
            }else if(val == 60){
                return '参与竞价'
            }else if(val == 65){
                return '待调度'
            }else if(val == 60){
                return '已派运'
            }else if(val == 68){
                return '已送达'
            }else if(val == 70){
                return '返单待确认'
            }else if(val == 71){
                return '返单待客户确认'
            }else if(val == 80){
                return '运输完成'
            }else if(val == 95){
                return '结算完成'
            }
        }
        ,
      quoteTypeName(val) {
        if (val == 10) {
          return '总价'
        } else if (val == 20) {
          return '单价'
        }
      },
    },
    components: {
      MtTabbar : Tabbar,
      MtTabItem : TabItem,
      mtCell : Cell,
      MtTabContainer : TabContainer,
      MtTabContainerItem : TabContainerItem,
      MTabbar,
      MtButton:Button,
      MtPopup:Popup,
      MtPopupTable:PopupTable,
      MtDatetimePicker:DatetimePicker
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  @import "~common/less/variable";
  @import "~common/less/modules/waybillDetail.less";
  @import "~common/less/modules/public.less";
  .receiptDetailwrap{
        i,span,li{
            font-weight: 400;
        }
        i, b{
          text-align: justify;
          text-align-last: justify;
          line-height: 0;
        }
        .cent{
            margin: 0 20px
        }
        h3{
            color: #666;
            font-size: 30px;
            padding: 0 30px;
        }
            ul{
                background: #fff;
                padding: 0 30px;
                li{
                    border-bottom: 1px solid #D8D8D8;
                    font-size: 28px;
                    &:last-child{
                        border-bottom:none;
                    }
                    input{
                        width: 500px;
                        float: right;
                        background: transparent;
                        border: none;
                        text-align: right;
                        font-size: 28px;
                    }
                }
            }
        .imgGroup{
            padding: 20px;
            .add{
                border: 1px solid #D0D0D0;
                font-size: 120px;
                color: #D0D0D0;
                text-align: center;
                line-height: 120px;
                font-weight: 100;
            }
            li{
                float: left;
                width: 140px;
                height: 130px;
                margin-left: 20px;
                margin-bottom: 20px;
                position: relative;
                border: 0.013333rem solid #D0D0D0;
                // background: #999;
                img{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    // top: 50%;
                    // transform: translateY(-50%);
                }
                .dele{
                    position: absolute;
                    background: #ccc;
                    padding: 4px;
                    border-radius: 50%;
                    width: 20px;
                    height: 20px;
                    line-height: 18px;
                    text-align: center;
                    font-weight: 200;
                    color: #fff;
                    top: -10px;
                    right: -10px;
                }
            }
        }
        .footBtnGroup{
            background: #fff;
            border-top: 1px solid #ccc;
            display: flex;
            a{
                flex: 1;
                display: inline-block;
                text-align: center;
                font-size: 36px;
                line-height: 100px;
                &.sureUp{
                    background: @blue;
                    color: #fff;
                }
            }
        }
    }
</style>















